<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				Cascader级联选择器
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
				
			<div class="example-title">options数据结构详情</div>
			<code-view>
				<template slot="code-js">{{ jsCode3 }}</template>
			</code-view>
			<br>
			
			<div id="parameter-list" class="example-title">&lt;gr-cascader&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain1" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="150">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="190">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="110">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="100">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="100">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			
			<div class="example-title">&lt;gr-cascader&gt;事件</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="方法名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="方法说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="参数" width="120">
						{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/cascaderdemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
jsCode1: `import {Cascader} from 'gabriel-ui'
Vue.use(Cascader)`,
htmlCode2: `<gr-input v-model="addr" suffix-icon="arrow-right-bold" 
	@click="show" @icon-click="show" />
<gr-popup v-model="isShowCascader">
	<gr-cascader v-model="addr" :options="options" @confirm="hide" />
</gr-popup>`,
jsCode2: `export default {
	data() {
		return {
			addr: '',
			isShowCascader: false,
			options: //见options数据结构详情
		}
	},
	methods: {
		show() {
			this.isShowCascader = true;
		},
		hide() {
			this.isShowCascader = false;
		}
	}
}`,
jsCode3: `options: [{   
	text: '河南省', value: '330000',
	children: [
		{   text: '安阳市', value: '330100',
			children: [
				{ text: '北关区', value: '330110' },
				{ text: '龙安区', value: '330120',
					children: [
						{ text: '商都路', value: '330121' },
						{ text: '清风路', value: '330122' },
						{ text: '幸福路', value: '330123' },
					]
				},
				{ text: '殷都区', value: '330130' }
			]
		},
		{   text: '新乡市', value: '330200',
			children: [
				{ text: '牧野区', value: '330210' },
				{ text: '凤泉区', value: '330220' }
			]
		},
		{   text: '郑州市',  value: '330300',
			children: [
				{ text: '中原区', value: '330310' },
				{ text: '二七区', value: '330320' },
				{ text: '金水区', value: '330320' }
			]
		},
	],
},
{   text: '陕西省', value: '320000',
	children: [
		{   text: '西安市', value: '320100',
			children: [
				{ text: '长安区', value: '320110' },
				{ text: '碑林区', value: '320120' },
				{ text: '临潼区', value: '320130' },
				{ text: '高陵区', value: '320140' },
				{ text: '鄂邑区', value: '320150' }
			]
		}
	]
}]
`,
				propertiesExplain1: [
					{
						attrName: 'v-model',
						introduce: `绑定的value值, 包含选中的级联数据`,
						type: 'String',
						optionValues: '----',
						defaultValue: '----'
					},
					{
						attrName: 'options',
						introduce: `级联数据结构, 至少包含一层, 可多层嵌套`,
						type: 'Array',
						optionValues: '----',
						defaultValue: '----'
					}
				],
				propertiesExplain2: [
					{
						attrName: 'confirm',
						introduce: `点击确定时触发该事件`,
						param: '绑定的value值'
					},
					{
						attrName: 'cancel',
						introduce: `点击取消时触发该事件`,
						param: '----'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			click(e) {
				this.$toast.show('这是一个吐司提示', 1000)
			}
		}
	}
</script>

<style lang="scss">
	
</style>
